<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>

<body>
<div id="hello-vue" class="demo">
  kilometers:<input type="text" v-model="Kilometers" @focus="Kilometers"/>
  meters: <input type="text" v-model="meters" @focus="meters"/>
</div>

<div id="info">
提示说明：
</div>
<script>
var app = {
  data(){
    return {
      Kilometers:0,
      meters:0,
    }
  },
  watch:{
    Kilometers:function(New,Old){
      console.log("watch Kilometers New: ",New," Old: ",Old)
      this.meters = New*1000
      
      document.getElementById('info').innerHTML= "<h1> before:" +  Old + "</h1> " +  "<h1> after:" +  New + "</h1> "

    },
    meters: function(New,Old){
      console.log("watch meters New: ",New," Old: ",Old)
      this.Kilometers = New/1000
    }
  }
  }

var vm =  Vue.createApp(app).mount('#hello-vue')


</script>
</body>
</html>
